<template>
  <el-form ref="form" :model="ft" label-width="40px">
    <el-form-item label="字体">
      <el-select v-model="ft.family" placeholder="请选择" @change="handleChange">
        <el-option
          v-for="(fm, key) in fms"
          :key="key"
          :label="fm"
          :value="key">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="字号">
      <el-select v-model="ft.size" placeholder="请选择" @change="handleChange">
        <el-option
          v-for="(fs, key) in fss"
          :key="key"
          :label="fs"
          :value="+key">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="颜色">
      <el-color-picker v-model="ft.color" @change="handleChange" />
    </el-form-item>
		<el-form-item label="风格">
		  <el-select v-model="ft.style" placeholder="请选择" @change="handleChange">
		    <el-option
		      v-for="(fsty, key) in fsty"
		      :key="key"
		      :label="fsty"
		      :value="+key">
		    </el-option>
		  </el-select>
		</el-form-item>
		<el-form-item label="粗细">
		  <el-select v-model="ft.weight" placeholder="请选择" @change="handleChange">
		    <el-option
		      v-for="(fw, key) in fwei"
		      :key="key"
		      :label="fw"
		      :value="+key">
		    </el-option>
		  </el-select>
		</el-form-item>
  </el-form>
</template>
<script>

import {
  FONT_FAMILYS,
  FONT_SIZES,
	FONT_STYLES,
	FONT_WEIGHT
	
} from '@/const/style-match.js'
export default {
  name: 'UIFont',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data () {
    const font = this.value
		
    return {
      fms: FONT_FAMILYS,
      fss: FONT_SIZES,
			fsty: FONT_STYLES,
			fwei: FONT_WEIGHT,
      ft: {
        color: font.c,
        size: font.s,
        family: FONT_FAMILYS[font.t],
				style: font.y,
				weight: font.b
      }
    }
  },
	watch:{
		value(new_val,old_val){
			this.ft.color=new_val.c
			this.ft.size=new_val.s
			this.ft.family=FONT_FAMILYS[new_val.t]
			this.ft.style=new_val.y
			this.ft.weight=new_val.b
		}
	},
  methods: {
    handleChange () {
      const ft = this.ft
      this.$emit('change', {
        key: 'ft',
        value: {
          s: ft.size,
          t: ft.family,
          c: ft.color,
					y: ft.style,
					b: ft.weight
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
	
</style>
